import React from "react";
import { useState } from "react";
import "./TodoHeader.css";
import store from "../../../redux/store";
import { addTodoAction, asyncAddTodoAction } from "../../../redux/reducers/todoReducer";
import {nanoid} from 'nanoid';

export default function TodoHeader() {
  let [keyword, setKeyword] = useState("");

  return (
    <div className="todo-header">
      <input
        type="text"
        placeholder="请输入你的任务名称，按回车键确认"
        value={keyword}
        onChange={(e) => {
          setKeyword(e.target.value);
        }}
        onKeyUp={(e) => {
          if(e.code === 'Enter'){
            store.dispatch(asyncAddTodoAction(keyword));
            //清空输入框内容
            setKeyword('');
          }
        }}
      />
    </div>
  );
}
